<template>
	<div class="comment_check">
		<el-breadcrumb separator="/" class="registration-list">
		  <el-breadcrumb-item :to="{ path: '/' }">活动列表</el-breadcrumb-item>
		  <el-breadcrumb-item :to="{ path: '/activity/list/comment_list/' + actionId}">评论管理</el-breadcrumb-item>
		  <el-breadcrumb-item>评论详情</el-breadcrumb-item>
		</el-breadcrumb>
		<div class="activity-title">【{{title}}】-评论详情</div>
		<div class="comment_detail">
			<el-row :gutter="20">
			  <el-col :span="4">
			  	<div class="grid-content bg-purple">
			  	<div class="header-img">
			  		<img width="100" height="100" :src="actionComment.headimg" alt="">	
			  	</div>
			  </div>
			</el-col class='comment-state'>
			  <el-col :span="8">
			  	<div class="grid-content bg-purple" style="margin-top:15px;">
			  		<div class="comment-name" >{{actionComment.username}}</div>
			  		<div class="comment-date">{{actionComment.createdate}}</div>
			  	</div>
			  </el-col>
			  <el-col :span="12">
			  	<div class="grid-content bg-purple" style="margin-top:15px;">
			  	审核状态:
			  	<span style="color:#4da4e9">{{actionComment.statusStr}}</span>
			  </div>
			</el-col>
			</el-row>
			<div class="comment-content">
				{{actionComment.connect}}
				<div class="comment-img">
				    <img class="img-item" :src="image1" v-if='image1!=""&&image1!=undefined'/>
					<img class="img-item" :src="image2" v-if='image2!=""&&image2!=undefined'/>
					<img class="img-item" :src="image3" v-if='image3!=""&&image3!=undefined'/>
					<img class="img-item" :src="image4" v-if='image4!=""&&image4!=undefined'/>
					<img class="img-item" :src="image5" v-if='image5!=""&&image5!=undefined'/>
			   </div>
			</div>
			<div class="state-btn">
				<el-button type="primary" v-show='actionComment.status==0' @click='handlePass' :disabled='passBtn'>通过</el-button>
				<el-button type="danger" @click='handleDelete' v-show='actionComment.status!=2' :disabled='deleteBtn'>删除</el-button>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data(){
			return {
				commentId: this.$route.params.id,
				actionId:this.$route.query.activityId,
				actionComment:{},
				title:'',
				image1:'',
				image2:'',
				image3:'',
				image4:'',
				image5:'',
				passBtn:false,
				deleteBtn:false
			}
		},

		methods:{
			getActivityData(){
				this.$http.post('marketweb/commentback/queryComment_detail',{
					keyAdmin:this.$store.state.keyAdmin,
					actionId:this.actionId,
					commentId:this.commentId
				}).then(response=>{
					if(response.body.code == 200){
						this.actionComment = response.body.actionComment,
						this.title = response.body.title;
						this.image1 = this.actionComment.image1,
						this.image2 = this.actionComment.image2,
						this.image3 = this.actionComment.image3,
						this.image4 = this.actionComment.image4,
						this.image5 = this.actionComment.image5;
					}else{
						this.$message.error(response.body.msg)
					}
				},response=>{

				})
			},

			handlePass(){
				 this.$confirm('确定通过此评论?', '提示', {
		          confirmButtonText: '确定',
		          cancelButtonText: '取消',
		          type: 'info'
		        }).then(() => {
	        	this.$http.post('marketweb/commentback/updatestatus',{
						keyAdmin:this.$store.state.keyAdmin,
						commentId:this.commentId,
						status:1
					}).then(response=>{
						if(response.body.code == 200){
						  this.$message({
				            type: 'success',
				            message: '通过成功!'
				          });
				          this.passBtn = true;
				          this.$router.push({name:'CommentList',params:{ id: this.actionId }})
						}else{
							this.$message.error(response.body.msg)
						}
					},response=>{
						this.$message.error('通过失败')
					})
	          
		        }).catch(() => {
		          this.$message({
		            type: 'info',
		            message: '已取消操作'
		          });          
		        });
				
			},

			handleDelete(){
				 this.$confirm('确定要删除此评论?', '提示', {
		          confirmButtonText: '确定',
		          cancelButtonText: '取消',
		          type: 'warning'
		        }).then(() => {
		         this.$http.post('marketweb/commentback/updatestatus',{
						keyAdmin:this.$store.state.keyAdmin,
						commentId:this.commentId,
						status:2
					}).then(response=>{
						if(response.body.code == 200){
						  this.$message({
				            type: 'success',
				            message: '删除成功!'
				          });
				          this.deleteBtn = true;
				          this.$router.push({name:'CommentList',params:{ id: this.actionId }})
						}else{
							this.$message.error(response.body.msg)
						}
					},response=>{
						this.$message.error('删除失败')
					})
		        }).catch(() => {
		          this.$message({
		            type: 'info',
		            message: '已取消删除'
		          });          
		        });
			}
		},

		created(){
			this.getActivityData()
		}
	}	
</script>

<style scoped>
.comment_check{
	padding-left: 30px;
}
.comment-title{
	color: #4da0e6;
	border-bottom: 1px solid #ddd;
	padding: 20px 0 ;
}
.activity-title{
	padding:20px 0;
}
.comment-img{
	margin-top: 10px;
}
.img-item{
	width: 150px;
	height: 120px;
	border-radius: 8px;
	border: none;
	margin: 10px 7px;
}
.header-img{
	width: 100px;
	height: 100px;
	border:1px solid #ddd;
	border-radius: 50%;
	overflow: hidden;
}
.comment_detail{
	margin-top: 20px;
}
.comment-name{
	padding-bottom: 10px;
}
.registration-list{
	font-size: 16px;
	padding-bottom: 10px;
	margin-bottom: 10px;
	border-bottom:1px solid #569efe;
}
.comment-state{
	width: 100%;
	font-size: 14px;
	color: #999;
}
.comment-content{
	margin-top: 30px;
	font-size: 16px;
	padding: 15px 20px;
	min-height: 100px;
	border: 2px solid #ddd;
	text-indent: 32px;
}
.state-btn{
	text-align: center;
	padding: 20px;
}
</style>